// 提供复用逻辑的函数
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'

// 数据懒加载函数
export const useLazyData = apiFn => {
  // 需要
  // 1. 被观察的对象
  // 2. 不同的API函数
  const result = ref([]) // 不能用 Null,首次加载时length属性会报错
  const target = ref(null)
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }], observerElement) => {
      // 是否进入可视区
      if (isIntersecting) {
        stop()
        // 调用API获取数据
        apiFn().then(res => {
          result.value = res.result
        })
      }
    },
    // 阈值：相交大于0就触发
    { threshold: 0 }
  )
  // 返回--->数据（dom,后台数据）
  return { result, target }
}
